<template>
  <div class="popup">
    <div class="main">
      <div class="header flex-between flex-align-items-center">
        <div class="left">
          <el-input v-model="form.name" placeholder="搜索任务" style="width: 100%;height: 40px;"></el-input>
          <i class="iconfont icon-sousuo pointer"></i>
        </div>
        <i class="right iconfont icon-guanbi1 pointer" @click="close"></i>
      </div>

      <div class="list">
        <div v-for="item in list" :key="item.id" class="item">
          <p class="item-name font-16 ellipsis-1">{{ item.name }}</p>
          <p class="item-desc font-14">红人分类：{{ item.name }}</p>
          <p class="item-desc font-14">红人国家：{{ item.name }}</p>
          <p class="item-desc font-14">红人平台：{{ item.name }}</p>
          <p class="item-time font-12">创建日期：{{ item.name }}</p>
          <div class="item-btns flex">
            <p class="font-14 pointer" @click="toTaskDetail(item)">详情</p>
            <p class="font-14 pointer" @click="checkHandle(item)">选择</p>
          </div>
        </div>
      </div>

      <div class="pagination flex-center">
        <el-pagination layout="prev, pager, next, total" :total="form.total" @current-change="currentChange" />
      </div>
    </div>
  </div>
</template>

<script setup>
import { defineEmits, defineProps, ref } from 'vue';
import { ElMessageBox } from 'element-plus';
import { useRouter } from 'vue-router';

const router = useRouter();
const props = defineProps(['selectList']);
const emit = defineEmits(['close']);

const form = ref({
  page: 1,
  perPage: 10
});
const list = ref([
  {
    id: 1,
    name: 'xxxx'
  }
]);

const close = () => {
  emit('close', null);
}
const currentChange = e => {
  form.value.page = e;
  // queryScheduleList();
}
const toTaskDetail = e => {
  router.push(`/taskDetail?id=${e.id}`);
}
const checkHandle = e => {
  ElMessageBox.confirm(
    `将向[ ${props.selectList.length} ]位红人推送接单任务[ ${e.name} ]，该任务目前已发送[ 1 ]封，红人接单后，您可在对应的接单任务中查看和管理进度。`,
    '提示',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消'
    }
  )
    .then(() => {
    })
    .catch(() => {
    })
}
</script>

<style lang="less" scoped>
.popup {
  .main {
    position: absolute;
    right: 0;
    top: 0;
    z-index: 10;
    width: 544px;
    height: 100%;
    background: #fff;
    padding: 24px;

    .header {
      margin-bottom: 32px;

      .left {
        width: 254px;
        position: relative;

        i {
          position: absolute;
          right: 10px;
          top: 10px;
          z-index: 10;
          font-size: 20px;
          color: #d3d3d3;
        }
      }

      .right {
        font-size: 32px;
        color: @main-color;
      }
    }

    .list {
      height: calc(100vh - 152px);
      overflow-y: auto;
      padding-right: 32px;

      .item {
        padding: 16px 16px 20px 24px;
        background: #fff;
        border-radius: 4px;
        box-shadow: 0 3px 8px 0 rgba(0, 0, 0, .08);
        position: relative;

        .item-name {
          color: rgba(0, 0, 0, .65);
          line-height: 22px;
          margin-bottom: 16px;
        }

        .item-desc {
          color: hsla(0, 0%, 46%, .85);
          line-height: 20px;
          margin-bottom: 12px;
        }

        .item-time {
          color: hsla(0, 0%, 46%, .85);
        }

        .item-btns {
          position: absolute;
          right: 16px;
          bottom: 20px;

          p {
            width: 56px;
            height: 28px;
            border-radius: 2px;
            text-align: center;

            &:first-child {
              border: 1px solid #d3d3d3;
              color: #999;
              margin-right: 12px;
              line-height: 26px;
            }

            &:last-child {
              background: @main-color;
              color: #fff;
              line-height: 28px;
            }
          }
        }
      }
    }
  }
}
</style>
